import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQml.Models 2.2
import "../mainmenu"

Rectangle{

    MainmenuItem{ id: label
        imagepath: qsTr("../../images/inout.png")
        content: qsTr("输入输出")
        height: 30
        anchors{
            top: parent.top; left: parent.left; right: parent.right
        }
    }

    Rectangle{ id: menu
        height: 50
        color: "gray"
        anchors{
            bottom: parent.bottom; left: parent.left; right: parent.right
        }
    }

    //中间部件
    Rectangle{
        //中间上面
       // color: "blue"
        Rectangle{ id: note
            height: 70
            //分两行三列
            Grid{
                columns: 3; rows: 2; rowSpacing: 4
               // horizontalItemAlignment: Grid.AlignLeft
                Text{
                    width: parent.width/3; height: parent.height/2
                    text: qsTr("常用")
                    font.pixelSize: 30
                }

                Text{
                    width: parent.width/3; height: parent.height/2
                    text: qsTr("活动过滤器")
                    color: qsTr("blue")
                    font.pixelSize: 20
                    horizontalAlignment: Text.AlignHCenter
                }

                Text{
                    width: parent.width/3; height: parent.height/2
                    text: qsTr("选择布局")
                    font.pixelSize: 20
                }

                Text {
                    width: parent.width/3; height: parent.height/2
                    text: qsTr("从列表中选择一个I/O信号")
                    font.pixelSize: 20
                }
                Rectangle{width: parent.width/3; height: parent.height/2}
                ComboBox{
                    width: parent.width/3; height: parent.height/2
                    model: ListModel{
                        ListElement{text: "默认"}
                        ListElement{text: "标签"}
                    }
                }

                anchors.fill: parent

            }

            anchors{
                top: parent.top; left: parent.left; right: parent.right
            }
        }

        ListView{
            id: listview
            delegate: inOutDelegate
            model: inOutModel
            header: headerView
            focus: true
            highlight: Rectangle{
                color: "lightblue"
            }

            anchors{
                top: note.bottom; bottom: parent.bottom; left: note.left; right: note.right
            }
        }

        anchors{
            top: label.bottom; left: parent.left; right: parent.right; bottom: menu.top
        }
    }


//==============ListView================
    Component{ id: inOutModel
        ListModel{

        }

    }

    Component{ id: headerView
        Rectangle {
            color: "lightgray"
            height: 30; width: parent.width;
            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    text: qsTr("名称")
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: listview.width/2;
//                    Layout.preferredWidth:120
                }

                Text {
                    text: qsTr("值")
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: listview.width/5;
//                    Layout.preferredWidth:80
                }

                Text {
                    text: qsTr("类型")
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: listview.width/10;
//                    Layout.preferredWidth:50
                }

                Text {
                    text: qsTr("设备")
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: listview.width/5;
//                    Layout.preferredWidth:80
                }
            }
        }
    }//Component

    Component{ id: inOutDelegate
        Item{
            id: wrapper
            width: parent.width;
            height: 30
            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    text: name
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: parent.width/2
                }
                Text{
                    text: value
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: parent.width/5
                }
                Text{
                    text: type
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: parent.width/10
                }
                Text{
                    text: device
                    color: wrapper.ListView.isCurrentItem ?"red":"black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22:18
                    Layout.preferredWidth: parent.width/5
                }
            }
        }
    }
}


